<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>zepto轮播图</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <!-- 引用核心文件 -->
    <script src="js/zepto/dist/zepto.min.js"></script>
    <!-- 引用扩展性选择器 -->
    <script src="js/zepto/src/selector.js"></script>
    <!-- 引用动画模块 -->
    <script src="js/zepto/src/fx.js"></script>
    <!-- 引用移动  touch -->
    <script src="js/zepto/src/touch.js"></script>
    <script>
        $(function () {
            //banner
            var $banner = $(".hm_banner");
            var width = $banner.width();
            // 图片盒子
            var imageBox = $banner.find("ul:eq(0)");
            // 点盒子
            var pointBox = $banner.find("ul:eq(1)");
            // 所有的点
            var points = pointBox.find("li");
            var animateFuc = function () {
                imageBox.animate(
                    {transform: "translateX(" + -index * width + "px)"},
                    400,
                    "ease",
                    function () {
                        if (index >= 9) {
                            index = 1;
                            // 瞬间定位
                            imageBox.css({
                                transform: "translateX(" + -index * width + "px)"
                            });
                        } else if (index <= 0) {
                            index = 8;
                            imageBox.css({
                                transform: "translateX(" + -index * width + "px)"
                            });
                        }
                        // 点盒子  对应
                        points
                            .removeClass("now")
                            .eq(index - 1)
                            .addClass("now");
                    }
                );
            };
            var index = 1;
            var timer = setInterval(function () {
                index++;
                // 做动画
                animateFuc();
            }, 5000);
            imageBox.on("swipeLeft", function () {
                index++;
                animateFuc();
                // setInterval();
                // console.log('11111');
            });
            imageBox.on("swipeRight", function () {
                index--;
                animateFuc();
                // setInterval();
                // console.log('22222');
            });

        });
    </script>
</head>
<body>
<div class="hm_layout"></div>
<!--搜索头部-->
<header class="hm_header">
    <div class="hm_header_box">
        <a href="" class="icon_logo"></a>
        <!--搜索按钮-->
        <form action="#">
            <span class="icon_search"></span>
            <!--失误：input不能放在span中-->
            <input type="search" placeholder="提示占位"/>
        </form>
        <a href="#" class="login">登录</a>
    </div>
</header>
<!--轮播图-->
<div class="hm_banner">
    <ul class="clearfix" style="touch-action: none; ">
        <li>
            <a href="#"><img src="images/images/l8.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l1.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l2.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l3.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l4.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l5.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l6.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l7.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l8.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l1.jpg" alt=""/></a>
        </li>
    </ul>
    <ul>
        <li class="now"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<!--导航栏-->
<nav class="hm_nav">
    <ul class="clearfix">
        <li>
            <a href="#">
                <img src="images/images/nav0.png" alt=""/>
                <p>分类查询</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/images/nav1.png" alt=""/>
                <p>黑马超市</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/images/nav2.png" alt=""/>
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/images/nav3.png" alt=""/>
                <p>个人中心</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/images/nav4.png" alt=""/>
                <p>充值中心</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/images/nav5.png" alt=""/>
                <p>黑马理财</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/images/nav6.png" alt=""/>
                <p>黑马培训</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/images/nav7.png" alt=""/>
                <p>黑马圈子</p>
            </a>
        </li>
    </ul>
</nav>
<!--商品-->
<main class="hm_product">
    <!--商品主盒子-->
    <section class="product_box hm_sk">
        <!--头部-->
        <div class="product_box_tit no_border">
            <div class="f_left m_l10">
                <span class="sk_icon"></span>
                <span class="sk_name m_l10">掌上秒杀</span>
                <div class="sk_time m_l10">
                    <span>0</span>
                    <span>0</span>
                    <span>:</span>
                    <span>0</span>
                    <span>0</span>
                    <span>:</span>
                    <span>0</span>
                    <span>0</span>
                </div>
            </div>
            <div class="f_right m_r10"><a href="#">更多></a></div>
        </div>
        <!--内容-->
        <div class="product_box_con">
            <ul class="clearfix">
                <li>
                    <a href="#"><img src="images/images/detail01.jpg" alt=""/></a>
                    <p>&yen;10.00</p>
                    <p>&yen;100.00</p>
                </li>
                <li>
                    <a href="#"><img src="images/images/detail02.jpg" alt=""/></a>
                    <p>&yen;10.00</p>
                    <p>&yen;100.00</p>
                </li>
                <li>
                    <a href="#"><img src="images/images/detail02.jpg" alt=""/></a>
                    <p>&yen;10.00</p>
                    <p>&yen;100.00</p>
                </li>
            </ul>
        </div>
    </section>
    <!--商品子盒子-->
    <section class="product_box">
        <!--头部-->
        <div class="product_box_tit">
            <h3>黑马超市</h3>
        </div>
        <!--内容-->
        <div class="product_box_con clearfix">
            <a href="#" class="f_left w_50 b_right">
                <img src="images/images/cp1.jpg" alt=""/>
            </a>
            <a href="#" class="f_right w_50 b_bottom">
                <img src="images/images/cp2.jpg" alt=""/>
            </a>
            <a href="#" class="f_right w_50">
                <img src="images/images/cp3.jpg" alt=""/>
            </a>
        </div>
    </section>
    <!--商品子盒子-->
    <section class="product_box">
        <!--头部-->
        <div class="product_box_tit">
            <h3>黑马超市</h3>
        </div>
        <!--内容-->
        <div class="product_box_con clearfix">
            <a href="#" class="f_right w_50 b_left">
                <img src="images/images/cp4.jpg" alt=""/>
            </a>
            <a href="#" class="f_left w_50 b_bottom">
                <img src="images/images/cp5.jpg" alt=""/>
            </a>
            <a href="#" class="f_left w_50">
                <img src="images/images/cp6.jpg" alt=""/>
            </a>
        </div>
    </section>
    <!--商品子盒子-->
    <section class="product_box">
        <!--头部-->
        <div class="product_box_tit">
            <h3>黑马超市</h3>
        </div>
        <!--内容-->
        <div class="product_box_con clearfix">
            <a href="#" class="f_left w_50 b_right">
                <img src="images/images/cp1.jpg" alt=""/>
            </a>
            <a href="#" class="f_right w_50 b_bottom">
                <img src="images/images/cp2.jpg" alt=""/>
            </a>
            <a href="#" class="f_right w_50 b_right">
                <img src="images/images/cp3.jpg" alt=""/>
            </a>
        </div>
    </section>
</main>
</body>
</html>
